import { useState, useRef, useEffect } from "react";
import _ from "lodash";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { add, del } from "./store/modules/countStore";
import { login } from "./store/modules/user";

function useGetList() {
  const [comlist, setComlist] = useState([]);
  useEffect(() => {
    const getDataList = async () => {
      const result = await axios({
        url: "http://192.168.100.81:48801/api/dobo-product/pro/plan/page",
        method: "post",
        headers: {
          "Dobo-Auth": "bearer 1863848585590861826",
        },
        data: {
          current: 2,
          size: 10,
          map: {
            status: [1, 2],
            proStatus: [],
            produceType: [],
            planType: [],
            orderStatus: [],
          },
        },
      });
      setComlist(_.orderBy(result.data?.data?.list || [], "createAt", "desc"));
    };
    getDataList();
  }, []);
  return {
    comlist,
    setComlist,
  };
}

function App() {
  const { comlist, setComlist } = useGetList();
  const tab = [
    {
      label: "最新",
      value: "new",
    },
    {
      label: "最热",
      value: "hot",
    },
  ];
  const onDel = (item) => {
    setComlist(comlist.filter((v) => v.id != item.id));
  };
  const [cur, setCur] = useState("new");
  const onTab = (item) => {
    setCur(item.value);
    setComlist(
      _.orderBy(comlist, item.value == "new" ? "createAt" : "like", "desc")
    );
  };
  const [orderNo, setContent] = useState("");
  const inputRef = useRef(null);
  const onOpen = () => {
    setComlist([
      {
        name: "周杰伦",
        orderNo,
        createAt: "2023-10-11",
      },
      ...comlist,
    ]);
    setContent("");
    inputRef.current.focus();
  };

  const { count } = useSelector((state) => state.counter);
  const { userInfo } = useSelector((state) => state.userInfo);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <button onClick={() => dispatch(login())}>登录</button>
      {Object.keys(userInfo).map((key) => (
        <div key={key}>
          {key}:{userInfo[key]}
        </div>
      ))}
      <div className="header">
        <input
          ref={inputRef}
          value={orderNo}
          onChange={(e) => setContent(e.target.value)}
        ></input>
        <button onClick={onOpen}>发布</button>

        <button onClick={() => dispatch(del({ num: 10 }))}>-</button>
        <span>{count}</span>
        <button onClick={() => dispatch(add({ num: 10 }))}>+</button>
      </div>
      <div className="tabs">
        {tab.map((item, index) => (
          <span
            className={cur == item.value ? "active" : ""}
            key={index}
            onClick={() => onTab(item)}
          >
            <span>{item.label}</span>
            {tab.length - 1 != index && <span>|</span>}
          </span>
        ))}
      </div>
      {comlist.map((item) => (
        <Item item={item} key={item.id} onDel={onDel} />
      ))}
    </div>
  );
}

function Item({ item, onDel }) {
  return (
    <div className="list">
      <div className="name">{item.materialName}</div>
      <div className="content">{item.orderNo}</div>
      <div className="time">
        <span>{item.createAt}</span>
        <button onClick={() => onDel(item)}>删除</button>
      </div>
      <hr />
    </div>
  );
}

export default App;
